//用来装小球实例
let ballArr = []


function Fn($x, $y) {
    //小球的坐标
    this.x = $x;
    this.y = $y;
    //小球的圆心半径
    this.r = 7;
    //小球的颜色
    this.color = `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`

    //每次小球的偏移值
    //定义随机偏移值
    this.moveX = Math.ceil(Math.random() * 5);
    this.moveY = Math.ceil(Math.random() * 3);
    //透明度
    this.opacity = 1

    //初始化函数
    this.init()
}

//小球的初始函数
Fn.prototype.init = function () {
    this.div = document.createElement("div")
    //添加类名
    this.div.classList.add("ball")
    //宽度、高度
    this.div.style.width = this.r * 2 + "px"
    this.div.style.height = this.r * 2 + "px"
    this.div.style.backgroundColor = this.color
    //鼠标的位置是圆心
    this.div.style.left = this.x - this.r + "px"
    this.div.style.top = this.y - this.r + "px"
    //透明度
    this.div.style.opacity = this.opacity;
    //将小球添加到文档上
    document.body.appendChild(this.div)
    //将小球的实例推进一个数组中（目的是让每个小球实例都去触发updata方法，实现每个小球都会自动移动）
    ballArr.push(this)
}

//更新小球的位置（状态）
Fn.prototype.updata = function () {
    //每次都去更新当前小球的坐标
    this.x += this.moveX
    this.y += this.moveY
    //让小球也随着xy坐标去移动
    this.div.style.left = this.x - this.r + "px"
    this.div.style.top = this.y - this.r + "px"
    //透明度
    this.opacity -= 0.03
    this.div.style.opacity = this.opacity
    //大小变化
    this.r += 0.4
    this.div.style.width = this.r * 2 + "px"
    this.div.style.height = this.r * 2 + "px"

    //当小球完全透明就可以销毁实例
    if (this.opacity <= 0) {
        //删除元素
        this.div.remove();
        //删除实例
        ballArr.forEach((item, index) => {
            if (item == this) {
                ballArr.splice(index, 1)
            };
        })
    }
}

//自动去变化当前实例的大小
setInterval(() => {
    //执行没一个小球的updata方法
    ballArr.forEach(item => {
        item.updata()
    })
}, 20)
